<template>
    <div id="echart" :style="{ width: width, height: height }"></div>
</template>

<script lang="ts" setup>
import { defineProps, withDefaults, onMounted, markRaw } from 'vue'
import * as echarts from 'echarts';

export interface Props {
    options: Object,
    height?: string,
    width?: string,
}

const props = withDefaults(defineProps<Props>(), {
    options: Object,
    heigth: '100px',
    width: '100%',
    echartObj:null,
})

onMounted(() => {
    const myChart = markRaw(echarts.init(document.getElementById('echart') as HTMLElement))
    props.options && myChart.setOption(props.options)
    window.onresize = function () {
        myChart.resize();
    }
})

</script>
